<template>
<div class="search_engine">
    <img :src="require('@/assets/imgs/cdutLogo.png')" alt="">
    <!-- <input style="padding-left:10px;" type="text" placeholder="请输入关键词"> -->
    <el-autocomplete
        v-model="keyWord"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入内容"
        @select="handleSelect"
        :trigger-on-focus="false"
    ></el-autocomplete>
    <el-button class="search" type="primary">进入词条</el-button>
</div>
</template>
<style scoped>
.search_engine{
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-top: 25px; */
}
.search_engine img{
  height: 50px;
}
.search_engine >>> input{
  width: 423px;
  height: 35px;
} 
.search_engine .search{
  height: 32px;
  border-radius: 0;
  font-family: arial;
  line-height: 50%;
}
/* input框提示信息样式 */
::-webkit-input-placeholder {
    color: #c0c4cc;
}
</style>
<script>
export default {
    data() {
        return {
            keyWord:'',
            //下拉选项
            results:[ ]
        }
    },
    methods: {
        //选中下拉选单时
        handleSelect(item) {
            console.log('改变了',item.aid)
            this.$router.push(`/pc/scienceAticle?article_id=${item.aid}`)
        },
        //这个函数里面调用接口
        async querySearchAsync(queryString, cb) {
            console.log(queryString);
           
            await this.$api.search(queryString).then(res => {
                this.results = []
                console.log(res.data.data)
                for(let i = 0; i < res.data.data.length; i++) {
                    this.results.push({
                        value: res.data.data[i].title,
                        aid: res.data.data[i].aid
                    }) ;
                     
                }
            })
            
            var res = this.results.filter(item => {
                return item.value.indexOf(queryString) !== -1
            })
            cb(res)
        }
    },
    created() {
        
    }
}
</script>